<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-goods-comment" :style="{ '--bg': appStyle.home_nav_color }">
			<!-- 头部 -->
			<view class="card padding-bj bg-white head radius-bock">
				<view class="card-title">
					<view class="card-item" :class="{ active: tag == '' }" @tap="onTag('')">全部 ({{ statisticsData.total > 100 ?
						'100+' : statisticsData.total }})</view>
					<view class="card-item" :class="{ active: tag == 'figure' }" @tap="onTag('figure')">有图 ({{
						statisticsData.figure > 100 ? '100+' : statisticsData.figure }})</view>
				</view>
				<!-- 标签 -->
				<view>
					<view @tap="onTag('good')" class="cu-tag" :class="{ active: tag == 'good' }">好评
						({{ statisticsData.good }})</view>
					<view @tap="onTag('pertinent')" class="cu-tag" :class="{ active: tag == 'pertinent' }">中评
						({{ statisticsData.pertinent }})</view>
					<view @tap="onTag('poor')" class="cu-tag" :class="{ active: tag == 'poor' }">差评 ({{ statisticsData.poor }})
					</view>
					<view @tap="onTag(index)" class="cu-tag round" :class="{ active: tag == index }"
						v-for="(number, index) in tagData" :key="number">
						{{ index }}({{ number }})
					</view>
				</view>
			</view>

			<!-- 评论卡片 -->
			<view class="list" :class="index == 0 ? 'list_firsh' : ''" v-for="(item, index) in listData" :key="item.id"
				v-if="listData.length">
				<view class="comment">
					<!-- 用户信息 -->
					<view class="userinfo">
						<view class="avatar">
							<view class="cu-avatar round"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
							</view>
							<view class="userName text-sm">
								<view>{{ item.user.nickname }}</view>
							</view>
							<wanl-rate :current="item.score" :disabled="true" />
						</view>
						<view class="text-gray text-sm">购买：{{ item.suk }}</view>
					</view>

					<!-- 评论详情 -->
					<view class="details">
						<view class="margin-bottom-sm">{{ item.content }}</view>
					</view>
					<view class="grid-square" v-if="item.images.length" :class="[item.images.length > 3 ? 'col-3' : 'col-' + item.images.length]">
						<!-- <view class="bg-img" style="margin-bottom: unset;" v-for="(image, tagInd) in item.images"
							:key="tagInd" @tap="previewImage(item.images, tagInd)"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view> -->
						<image 
							mode="aspectFill"
							@tap="previewImage(item.images, tagInd)"
						 	v-for="(image, tagInd) in item.images" :key="tagInd"
							class="bg-img" :src="$wanlshop.oss(image, 248, 0)"
							alt="" srcset="">
					</view>

					<view class="reply">
						<view class="text-gray">
							<view class="address" v-if="item.store && item.store.store_name">
								{{ item.store && item.store.store_name || '' }}
							</view>
							<view>{{ $wanlshop.timeToDate(item.createtime) }}</view>
						</view>
						<view class="flex" :class="{active: item.liked}">
							<!-- 点赞 -->

							<view class="liked" @tap="handleLike(index)">
								<view class="image" v-if="item.liked">
									<image style="width: 30rpx;" src="../../static/images/default/alreadyLiked.png" mode="widthFix">
									</image>
								</view>
								<view class="image" v-else>
									<image style="width: 30rpx;" src="../../static/images/default/notLiked.png" mode="widthFix"></image>
								</view>
								{{ item.like ? item.like : 0 }}
							</view>
							<!-- 回复评论 -->
							<view class="reply-view margin-left" @tap="handleComments(index)">
								<!-- <text class="wlIcon-pinglun margin-right-xs"></text> -->
								<!-- <view class="image" :style="{ backgroundImage: 'url(../../static/images/default/evaluate.png)' }"></view> -->
								<view class="image">
									<image style="width: 100%; height: 100%;" src="../../static/images/default/evaluate.png"></image>
								</view>
								{{ item.child_num }}
							</view>
						</view>
					</view>
				</view>

				<view class="recommend-list" v-if="item.child.length">
					<view class="item" v-for="(item, reInd) in item.child" :key="item.id">
						<!-- 用户信息 -->
						<view class="header">
							<view class="userinfo">
								<view class="avatar round margin-right-sm"
									:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
								</view>
								<text>{{ item.user.nickname ? item.user.nickname : item.user.username }}</text>
							</view>

							<!-- 点赞 -->
							<!-- <view class="like" :class="{ 'wanl-orange': item.liked }" @tap="recommendLike(index,reInd)">
								<text class="margin-right-xs" :class="[item.liked ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
								{{ item.like ? item.like : 0 }}
							</view> -->
						</view>

						<!-- 子评论 - 内容 -->
						<view class="main">
							<view class="content">{{ item.content }}</view>
							<view class="msg">
								<text class="text-gray text-sm">{{ $wanlshop.timeToDate(item.createtime) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<wanl-empty v-if="listData.length <= 0" text="暂无评论"></wanl-empty>

			<!-- 模态框 -->
			<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
				<view class="cu-modal bottom-modal" :class="modalName == 'comments' ? 'show' : ''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop="">
						<view class="wanl-modal" style="padding-bottom: 0">
							<view class="head padding-bj" style="margin-bottom: 25rpx;">
								<view class="content">
									<view class="text-lg">全部评论（{{ recommendData.count }}）</view>
								</view>
							</view>
							<!-- <view class="text-left padding-lr-bj padding-bottom-bj">
								<wanl-comment :findId="commentData.find_id" :commentList="commentData.list"
									:commenCount="commentData.count" @complete="handleComplete" />
							</view> -->
							<view class="text-left padding-lr-bj padding-bottom-bj">
								<wanl-comment :findId="recommendData.pid" :commentList="recommendData.list"
									:commenCount="recommendData.count" @complete="recommendComplete" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				listData: [], //列表
				upListData: null,
				tagData: [], //标签数据
				statisticsData: {
					rate: 0,
					good: 0,
					pertinent: 0,
					poor: 0,
					figure: 0
				}, //统计
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				goods_id: 0, //商品ID
				tag: '', //查询的标签
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},

				// 评论
				commentData: {
					pid: 0,
					count: 0,
					list: []
				},
				//评论列表
				data: [{
					user: {
						avatar: '',
						nickname: '加载中...'
					},
					shop: {
						avatar: '',
						shopname: '加载中...'
					},
				}],
				// 回复评论
				recommendData: {
					pid: 0,
					count: 0,
					list: [],
				},
				modalName: null,
			};
		},
		computed: {
			...mapState(['common']),
			// 全局样式
			appStyle() {
				let style = this.common.appStyle;
				uni.setNavigationBarColor({
					backgroundColor: style.home_nav_color
				});
				return style;
			}
		},
		onLoad(option) {
			this.goods_id = option.id;
			this.tag = option.tag ? option.tag : '';
			this.loadData();
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			async loadData() {
				//加载评论
				this.$api.get({
					url: '/wanlshop/product/comment',
					data: {
						id: this.goods_id,
						page: this.current_page,
						tag: this.tag
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.listData = this.reload ? res.comment.data : this.listData.concat(res.comment
							.data); //评论数据 追加
						this.total = res.comment.total; //数据量
						this.current_page = res.comment.current_page; //当前页码
						this.last_page = res.comment.last_page; //总页码
						this.statisticsData = res.statistics; // 统计数据
						this.tagData = res.tag; //标签数据
						this.status = res.comment.total == 0 ? 'noMore' : 'more';

						console.log('this.listData', this.listData)
					}
				});
			},
			/**
			 * @param {Object} image 图片数组
			 * @param {Object} index 键名
			 */
			previewImage(image, index) {
				//预览图片
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500, 0));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			/**
			 * 搜索标签- 跟下拉刷新同理
			 * @param {Object} tag
			 */
			onTag(tag) {
				this.current_page = 1;
				this.reload = true;
				this.tag = tag;
				this.loadData();
			},
			// 点赞 
			async handleLike(index = null) {
				if (this.$store.state.user.isLogin) {
					let data = index === null ? this.data : this.listData[index];
					this.$api.post({
						url: '/wanlshop/user/likeData?id=' + data.id,
						success: res => {
							console.log('res', res)
							if (res.data) {
								data.like += 1;
							} else {
								data.like -= 1;
							}
							data.liked = res.data;
							console.log('data', data)
						}
					});

				} else {
					this.$wanlshop.to('/pages/user/auth/name');
				}
			},

			// 点赞回复评论
			recommendLike(index = null, reInd = null) {
				if (this.$store.state.user.isLogin) {
					let data = index === null ? this.data : this.listData[index].child[reInd];

					this.$api.post({
						url: '/wanlshop/user/likeData?id=' + data.id,
						success: res => {
							console.log('res', res)
							if (res.data) {
								data.like += 1;
							} else {
								data.like -= 1;
							}
							data.liked = res.data;
							console.log('data', data)
						}
					});

				} else {
					this.$wanlshop.to('/pages/user/auth/name');
				}
			},

			async handleComments(index = null) {
				let data = index === null ? this.data : this.listData[index];
				this.recommendData.list = data.child;
				this.recommendData.count = data.child.length;
				this.recommendData.pid = data.id;
				this.modalName = 'comments';
			},
			// 完成回复评论
			recommendComplete() {
				console.log('完成回复评论')
				this.reload = true;
				this.loadData();
				this.hideModal();
			},
			// 关闭弹出层
			hideModal() {
				this.modalName = null;
			},
			//禁止父元素滑动
			moveHandle() {}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #fafafa;
	}

	.wanl-goods-comment {
		padding: 20rpx;
		background-color: var(--bg);
		min-height: 100vh;

		.card {
			border-radius: 18rpx 18rpx 0 0 !important;
		}

		.head,
		.list {
			//box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		}

		.head {
			.card-title {
				display: flex;

				.card-item {
					margin-right: 50rpx;
					color: #333333;
					padding-bottom: 10rpx;
					border-bottom: 4rpx solid transparent;
				}

				.active {
					color: #5b3834;
					border-color: #5b3834;
				}
			}

			.cu-tag {
				box-sizing: border-box;
				height: 50rpx;
				border-radius: 12rpx;
				background-color: #dca879;
				color: #fff;

				&.active {
					background-color: #fd8c00;
					color: #fff;
				}
			}
		}

		.list {
			background-color: transparent;
			background-color: #ffffff !important;
			padding: 24rpx;
			border-radius: 18rpx;

			// 评论
			.comment {
				background-color: white;

				//padding: 20rpx;
				//border-radius: 18rpx;
				// margin-bottom: 22rpx;
				.userName {
					margin-right: 24rpx;
					margin-left: 8rpx;
				}

				.details {
					padding-left: 74rpx;
				}

				.grid-square {
					padding-left: 74rpx;
					display: flex;
					flex-wrap: wrap;
					.bg-img {
						margin-right: 8rpx;
						width: 190rpx;
						height: 190rpx;
						border-radius: 8rpx;
						margin-bottom: 8rpx !important;
						background: black;
					}
					.bg-img:nth-child(3n) {
						margin-right: 0rpx;
					}
				}
			}

			// 回复评论
			.reply {
				padding-left: 74rpx;
				padding-top: 0;
				display: flex;
				margin-top: 16rpx;
				//justify-content: flex-end;
				justify-content: space-between;
				align-items: flex-start;

				.address {
					font-size: 28rpx;
					margin-bottom: 16rpx;
				}

				.liked {
					display: flex;
					align-items: center;
					color: #858585;

					.image {
						width: 32rpx;
						height: 28rpx;
						background-repeat: no-repeat;
						margin-right: 8rpx;
					}
				}
				
				.flex.active .liked{
					color: $theme;
				}

				.reply-view {
					display: flex;
					align-items: center;
					color: #858585;

					.image {
						width: 32rpx;
						height: 28rpx;
						background-repeat: no-repeat;
						margin-right: 8rpx;
					}
				}
			}

			.recommend-list {
				width: 100%;
				padding-top: 24rpx;
				border-top: 1rpx solid #f6f6f6;
				margin-top: 24rpx;

				.item {
					width: 100%;
					// border: 1px solid red;

					.header {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.userinfo {
							width: fit-content;

							.avatar {
								width: 50rpx;
								height: 50rpx;
								background-size: cover;
							}
						}
					}

					.main {
						margin-left: 70rpx;
						color: #858585;

						.content {
							color: #3d3d3d;
							margin-bottom: 10rpx;
							word-break: break-all;
						}
					}
				}
			}
		}

		.list_firsh {
			border-radius: 0 0 18rpx 18rpx !important;
		}
	}
</style>